<template>
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    :unique-opened="false"
    :collapse-transition="false"
    mode="vertical"
    class="sidebar-menu"
    @select="handleMenuSelect"
  >
    <sidebar-item
      v-for="menu in userMenus"
      :key="menu.id"
      :item="menu"
      :base-path="menu.path || ''"
    />
  </el-menu>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getUserMenus, type MenuItem } from '@/config/menu'
import SidebarItem from './SidebarItem.vue'

interface Props {
  isCollapse?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isCollapse: false
})

const route = useRoute()
const router = useRouter()

// 用户权限（这里可以从store或API获取）
const userPermissions = ref<string[]>(['*:*:*']) // 超级管理员权限

// 获取用户菜单
const userMenus = computed(() => getUserMenus(userPermissions.value))

// 当前激活的菜单
const activeMenu = computed(() => {
  const { path } = route
  return path
})

// 菜单选择处理
const handleMenuSelect = (index: string) => {
  if (index && index !== route.path) {
    router.push(index)
  }
}

onMounted(() => {
  console.log('用户菜单:', userMenus.value)
})
</script>

<style scoped>
.sidebar-menu {
  border: none;
  height: 100%;
  width: 100% !important;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 210px;
}
</style>
